<template>
    <div :class="themeShow && 'active'" class="theme">
        <div :class="checked ? 'dark' : 'light'" class="theme__container">
            <img src="@/assets/svg/Theme/dark.svg" alt="">
            <img src="@/assets/svg/Theme/light.svg" alt="">
        </div>
    </div>
</template>

<script setup>
defineProps({
    themeShow: {
        type: Boolean,
        default: false
    },
    checked: {
        type: Boolean,
        default: false
    },
})
</script>

<style lang="scss">
.theme {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transition: .3s;
    width: 100vw;
    z-index: -2;
    opacity: 0;
    overflow: hidden;
    background: linear-gradient(to bottom,
            var(--background-color),
            var(--background-to));

    &.active {
        opacity: 1;
        z-index: 5;
    }

    img:last-child {
        transform: rotateZ(180deg);

    }

    &__container {
        height: 200vh;
        @include flex(column, center, space-around);
        transition-delay: 1s;
        transition: 1s;
        transform: rotateZ(0deg);

        &.light {
            transform: rotateZ(180deg);
        }

        &.dark {
            transform: rotateZ(360deg);
        }
    }

    img {
        height: 50vh;
    }
}
</style>